<template>
	<view class="load" :style="myStyle">
		<view :class="mainClass" @click="onClick()">
			<label class="label">{{label}}</label>
			<myIcon :size="height" :src="src" :label="iconLabel" :fontSize="iconFontSize" fontColor="#ffffff" ></myIcon>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			width:{
				type:String,
				default:'200rpx'
			},
			height:{
				type:String,
				default:'100rpx'
			},
			borderSize:{
				type:String,
				default:'0rpx'
			},
			borderRadius:{
				type:String,
				default:'0rpx'
			},
			bkColor:{
				type:String,
				default:'transparent'
			},
			hoverColor:{
				type:String,
				default:'transparent'
			},
			fontSize:{
				type:String,
				default:'20rpx'
			},
			fontColor:{
				type:String,
				default:'black'
			},
			fontWight:{
				type:String,
				default:'400'
			},
			shadow:{
				type:String,
				default:'0rpx'
			},
			load:{
				type:String,
				default:'0s'
			},
			endStyle:{
				type:Boolean,
				default:true
			},
			label:{
				type:String,
				default:'添加文字'
			},
			src:{
				type:String,
				default:'#'
			},
			iconFontSize:{
				type:String,
				default:'20rpx'
			},
			iconLabel:{
				type:String,
				default:'添加文字'
			},
			url:{
				type:String,
				default:'#'
			}
		},
		mounted(){
			const that=this;
			for(const index in that['_props']){
				if(index=='endStyle')
					break;
				that['myStyle']+='--'+index+':'+that['_props'][index]+';';
			}
		},
		data() {
			return {
				myStyle:'',
				mainClass:'main'
			}
		},
		methods: {
			onClick(){
				const that=this;
				that.$emit('myClick');
				that.mainClass='main-hover';
				setTimeout(function(){
					that.mainClass='main'
				},200);
				if(that.url!='#'){
					wx.navigateTo({
						url:that.url
					});
				}
			}
		}
	}
</script>

<style scoped>
	.load{
		animation: load var(--load) linear;
	}
	.main{
		width: calc(var(--width)*0.9);
		height: var(--height);
		padding-left: calc(var(--width)*0.05);
		padding-right: calc(var(--width)*0.05);
		border: var(--borderSize) solid #000000;
		border-radius: var(--borderRadius);
		background-color: var(--bkColor);
		box-shadow: 0 0 var(--shadow) 0 #666666;
		color: var(--fontColor);
		font-size: var(--fontSize);
		font-weight: var(--fontWight);
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.main-hover{
		width: calc(var(--width)*0.9);
		height: var(--height);
		padding-left: calc(var(--width)*0.05);
		padding-right: calc(var(--width)*0.05);
		border: var(--borderSize) solid #000000;
		border-radius: var(--borderRadius);
		background-color: var(--hoverColor);
		box-shadow: 0 0 var(--shadow) 0 #666666;
		color: var(--fontColor);
		font-size: var(--fontSize);
		font-weight: var(--fontWight);
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.label{
		width: calc(var(--width)*0.9 - var(--height));
		word-break: break-word;
	}
</style>
